Vue 3 Development with the PrimeVue Framework — Org Chart and Paginator

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Org Chart

PrimeVue comes with an org chart component to let us add one easily.

To add one, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import OrganizationChart from 'primevue/organizationchart';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("OrganizationChart", OrganizationChart);
app.mount("#app");

App.vue

<template>
  <div>
    <OrganizationChart :value="data">
      <template #default="slotProps">
        <span>{{ slotProps.node.data.label }}</span>
      </template>
    </OrganizationChart>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      data: {
        key: "0",
        data: { label: "F.C. Barcelona" },
        children: [
          {
            key: "0_0",
            data: { label: "Barcelona" },
            children: [
              {
                key: "0_0_0",
                data: { label: "Chelsea" },
              },
              {
                key: "0_0_1",
                data: { label: "Barcelona" },
              },
            ],
          },
          {
            key: "0_1",
            data: { label: "Real Madrid" },
            children: [
              {
                key: "0_1_0",
                data: { label: "Bayern Munich" },
              },
              {
                key: "0_1_1",
                data: { label: "Real Madrid" },
              },
            ],
          },
        ],
      },
    };
  },
  methods: {},
};
</script>

We register the OrganizationChart component in main.js .

Then we add the OrganizationChart component into our App.vue component.

value is set to data , which is an object with the key , data , and children properties.

key is a unique ID. data is an object with the label property, which we display by populating the default slot.

slotProps.node.data has the same data property of each object.

children has an array of child node objects.

Paginator

We can add the Paginator component into our Vue 3 app to let us add page navigation into our app.

To add it, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Paginator from 'primevue/paginator';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("Paginator", Paginator);
app.mount("#app");

App.vue

<template>
  <div>
    <Paginator :rows="10" :totalRecords="200"></Paginator>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

We register the Pagination component and add it into App .

We set the rows to set the number of entries per page.

And totalRecords have a total number of records.

Also, we can set the offset to set the initial page to a different page:

<template>
  <div>
    <Paginator :rows="10" :totalRecords="200" :first="20"></Paginator>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Equivalently, we can write:

<template>
  <div>
    <Paginator
      :rows="10"
      :totalRecords="200"
      v-model:first="offset"
    ></Paginator>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      offset: 20,
    };
  },
  methods: {},
};
</script>

Now the initial page is page 3.

Also, we can add a rows per page dropdown with the rowsPerPageOptions prop:

<template>
  <div>
    <Paginator
      :rows="10"
      :totalRecords="200"
      v-model:first="offset"
      :rowsPerPageOptions="[10, 20, 30]"
    >
    </Paginator>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      offset: 20,
    };
  },
  methods: {},
};
</script>

Conclusion

We can add an org chart and a paginator component into our Vue 3 app with PrimeVue.